<template>
	<div>
		<Button class="addbutton" icon="plus-round" type="dashed" @click="addPic">新增图片</Button>
		<v-table :tableColumns="tableColumns" :tableData="tableData"></v-table>
		<Modal v-model="isImgShow" :width="400" class-name="eidthform" :footer-hide="true">
		    <p slot="header">图片查看</p>
			<div class="demo-upload-list">
		    	<div class="imgbox">
					<img :src="imgUrl">
				</div>
		    </div>
		</Modal>
		<Modal v-model="editImg" :width="400" class-name="eidthform">
			<p slot="header">图片编辑</p>
			<div slot="footer" class="button-box">
				<div class="oDiv">
		  			<Upload :show-upload-list="false" :before-upload="handleBeforeUpload" :on-success="handleSuccess" action="http://192.168.6.87:9090/upload/image" :data="images">
			  		<div style="width: 80px;height:80px;line-height: 80px;">
			            <Icon type="ios-camera" size="20"></Icon>
			        </div>
					</Upload>
		  		</div>
		  		<Button type="ghost" @click="cancel('editImg')">取消</Button>
	            <Button type="primary" >保存</Button>
	        	</div>
		</Modal>
		<Modal v-model="addImg" :width="400" class-name="eidthform">
			<p slot="header">新增图片</p>
			<div class="oDiv">
		  			<Upload :show-upload-list="false" :before-upload="handleBeforeUpload2" :on-success="handleSuccess2" action="http://192.168.6.87:9090/upload/image" :data="images">
			  		<div style="width: 80px;height:80px;line-height: 80px;">
			            <Icon type="ios-camera" size="20"></Icon>
			        </div>
					</Upload>
		  		</div>
			<div slot="footer" class="button-box">
				<Button type="ghost" @click="cancel('addImg')">取消</Button>
		        <Button type="primary">保存</Button>
	        </div>
		</Modal>
	</div>
</template>

<script>
	import vTable from '@/components/common/Table.vue' 
	export default {
		components: {
			vTable
		},
		data() {
			return {
				addImg: false,
				editImg: false,
				isImgShow: false,
				imgUrl: '',
				formData:{
					
				},
				addpicData: {
					bannerurl: 'http://www.decsungroup.com/',
					seqNo: '',
					banner: ''
				},
				images: {
		    		type: 4,
					image: null
		    	},
				tableColumns:[{ type: "index", align: "center", width: 100 },
					{ title: '查看图片', key: '查看图片', align: "center" ,
						render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	this.isImgShow = true
                                        	this.imgUrl = params.row.banner
                                        }
                                    }
                                }, '查看图片')
                            ]);
                        }
					},
					{
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '10px' },
                                    on: {
                                        click: () => {
                                        	this.editImg = true
                                        	this.formData = params.row
                                        	console.log(this.formData)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: { type: 'error', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	console.log(params.row.id)
                                        	this.$http.post('/banner/remove',{bannerId:params.row.id})
                                        	.then((res)=>{
                                        		console.log(res)
                                        		this.$Message.success('删除成功');
                                        		this.getBannerList()
                                        	})
                                        	.catch((err)=>{
                                        		console.log(err)
                                        		this.$Message.error('删除失败');
                                        	})
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
				],
				tableData:[]
			}
		},
		created() {
			// banner列表
			this.getBannerList()
		},
		methods: {
			getBannerList(){
				this.$http.get('/banner/list')
				.then(({data})=>{
					this.tableData = data.data.map(e=>{
//						'http://dxyisudai.com'  // 线上	
						e.banner = 'http://dxyisudai.com' + e.banner	
						return e
					})
					console.log(data)
				})
			},
			// 取消
            cancel(showName){
            	this[showName] = false;
            	this.editImg = false;
            },
            // 上传图片之前
            handleBeforeUpload(file){
            	this.images.image = file
            },
            // 上传图片成功，后台返回数据
            handleSuccess(file){
            	console.log(file)
            },
             // 上传图片之前
            handleBeforeUpload2(file){
            	this.images.image = file
            },
            // 上传图片成功，后台返回数据
            handleSuccess2(file){
            	console.log(file)
            },
            // 新增图片
            addPic(){
            	this.addImg = true
            }
		}
	}
</script>

<style lang="less">
 .demo-upload-list{
        display: inline-block;
        /*width: 60px;*/
        height: auto;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
        z-index: 999999;
        margin-bottom: 20px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
         z-index: 999999;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
        z-index: 999999;
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
         z-index: 999999;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 40px 2px;
         z-index: 999999;
    }
    .oDiv {
		border: 1px dashed #ccc; 
		text-align: center;
		height: 80px;
		width: 80px;
		line-height: 80px; 
		cursor:pointer;
		margin: 40px auto;
	}
</style>